<template>
  <div class="statistics">
    <div class="sell-charts"></div>
    <table-view-with-title :titles="titles1" :dataSource="list1" @next="changePageClick(data)" @previous="changePageClick(data)" :maxPage="maxPage1" always></table-view-with-title>
    <div class="buy-charts"></div>
    <table-view-with-title :titles="titles2" :dataSource="list2" @next="changePageClick(data)" @previous="changePageClick(data)" :maxPage="maxPage2" always></table-view-with-title>
    <p>本月售卡：
      <span>{{agentInfo.total_number}}</span>张，击败了
      <span>{{agentInfo.beat_agent}}%</span> 的代理，相比上个月下降了
      <span>{{agentInfo.agent_range_type}}</span>，继续努力哦！</p>
  </div>
</template>

<script>
import echarts from "echarts";
import { dateFormat } from "vux";
import TableViewWithTitle from "../../components/common/TableViewWithTitle.vue";
export default {
  data() {
    return {
      sellLineData: [],
      sellLineTitles: [],
      list1: [],
      list2: [],
      maxPage1: "",
      maxPage2: "",
      agentInfo: {},
      titles1: [
        {
          key: "years",
          value: "日期"
        },
        {
          key: "playernum",
          value: "购卡玩家个数"
        },
        {
          key: "cardmaxnum",
          value: "最大购买数"
        },
        {
          key: "buytimecount",
          value: "购买次数"
        },
        {
          key: "cardnum",
          value: "销售房卡数"
        },
        {
          key: "goods_price",
          value: "销售金额"
        }
      ],
      titles2: [
        {
          key: "years",
          value: "日期"
        },
        {
          key: "agent_buy_card_number",
          value: "平台购卡量"
        },
        {
          key: "agent_sale_card_total_number",
          value: "销卡量"
        },
        {
          key: "agent_sale_card_total_money",
          value: "销卡金额"
        },
        {
          key: "agent_total_buy_card_number",
          value: "总购卡量"
        },
        {
          key: "agent_buy_card_total_money",
          value: "购卡金额"
        },
        {
          key: "agent_profit",
          value: "利润金额"
        }
      ]
    };
  },
  components: {
    TableViewWithTitle
  },
  created() {
    this.apiService.agentstatics.salescardstaticslist().then(res => {
      this.maxPage1 = Math.ceil(res.data.total / 10);
      this.list1 = res.data.salescardlist;
      this.list1.forEach(item => {
        item.years = dateFormat(item.years * 1000, "YYYY-MM-DD");
      });
    });
    this.apiService.agentstatics.buycardstaticslist().then(res => {
      this.maxPage2 = Math.ceil(res.data.total / 10);
      this.list2 = res.data.buycardlist;
      this.list2.forEach(item => {
        item.years = dateFormat(item.years * 1000, "YYYY-MM-DD");
      });
    });
    this.apiService.agentstatics.agentrank().then(res => {
      this.agentInfo = res.data;
    });
  },
  mounted() {
    this.apiService.agentstatics.salescardstaticschart().then(res => {
      let chartX = res.data.salescardstaticscategories.map(item => {
        return dateFormat(item * 1000, "YYYY-MM-DD");
      });
      let data = res.data.salescardstaticsseries;
      data.map(item => {
        this.sellLineTitles.push(item.name);
        this.sellLineData.push({
          name: item.name,
          type: "line",
          data: item.data
        });
      });
      this.$nextTick(() => {
        let sellChart = echarts.init(document.querySelector(".sell-charts"));
        // 绘制图表
        sellChart.setOption({
          title: {
            text: "我的售卡统计",
            left: "center",
            textStyle: {
              color: "#555",
              fontWeight: "normal"
            }
          },
          legend: {
            bottom: "0px",
            data: this.sellLineTitles
          },
          tooltip: {},
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: chartX
          },
          yAxis: {},
          series: this.sellLineData
        });
      });
    });

    this.apiService.agentstatics.buycardstaticschart().then(res => {
      let buyChart = echarts.init(document.querySelector(".buy-charts"));
      let chartX = res.data.buycardstaticscategories.map(item => {
        return dateFormat(item * 1000, "YYYY-MM-DD");
      });
      let chartY = [];
      let chartTitle = [];
      let data = res.data.buycardstaticsseries;
      data.map(item => {
        chartTitle.push(item.name);
        chartY.push({
          name: item.name,
          type: "line",
          data: item.data
        });
      });
      // 绘制图表
      buyChart.setOption({
        title: {
          text: "我的购卡统计",
          left: "center",
          textStyle: {
            color: "#555",
            fontWeight: "normal"
          }
        },
        legend: {
          bottom: "0px",
          data: chartTitle
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: chartX
        },
        yAxis: {},
        series: chartY
      });
    });
  }
};
</script>

<style scoped>
.statistics {
  background-color: #fff;
}
.buy-charts,
.sell-charts {
  height: 8rem;
  width: 100%;
}
</style>


